'use strict';

//获取静态元素
const inputThing = document.querySelector('.input_thing');
const thingsLists = document.querySelector('.things_lists');
const whole = document.querySelector('#whole');
const done = document.querySelector('.done');
const done2 = document.querySelector('.done2');
const total = document.querySelector('.total');
const delDone = document.querySelector('.del_done');

//更新动态元素
function updateEle() {
    let items = thingsLists.querySelectorAll('li');
    let checkbox = document.querySelectorAll('.checkbox');
    let content = document.querySelectorAll('.content');
    let delLists = document.querySelectorAll('.del_lists');
    return {
        items,
        checkbox,
        content,
        delLists,
    }
}

//总数显示功能
function totalNum() {
    let dataArr = JSON.parse(window.localStorage.getItem('things'));
    total.innerHTML = dataArr.length;
}

//完成任务数显示功能
function finish() {
    let num = 0;
    let doneStep = -3;
    let done2Step = 1;
    let dataArr = JSON.parse(window.localStorage.getItem('things'));
    dataArr.filter(item => item.done ? num++ : num);
    done2.innerHTML = num;
    if (!num) whole.checked = false;
    let doneMov = setInterval(() => {
        doneStep--;
        done.style.top = doneStep + 'px';
        if (doneStep <= -16) {
            done.innerText = num;
            clearInterval(doneMov);
        }
    }, 16);
    let done2Mov = setInterval(() => {
        done2Step--;
        done2.style.top = done2Step + 'px';
        if (done2Step <= -22) {
            clearInterval(done2Mov);
        }
    }, 16);
}

//本地存储数据
function saveData() {
    let eleObj = updateEle();
    let dataArr = [];
    for (let i = 0; i < eleObj.items.length; i++) {
        if (!eleObj.items.length) break;
        dataArr.push({
            id: eleObj.checkbox[i].id,
            thing: eleObj.content[i].innerText,
            done: eleObj.checkbox[i].checked
        });
    }
    window.localStorage.setItem('things', JSON.stringify(dataArr));
    finish();
}

//选择功能
function selectThing() {
    let eleObj = updateEle();
    for (let i = 0; i < eleObj.checkbox.length; i++) {
        eleObj.checkbox[i].onchange = () => {
            for (let n = 0; n < eleObj.items.length; n++) {
                if (!eleObj.checkbox[n].checked) {
                    whole.checked = false;
                    break;
                }
                if (n === eleObj.items.length - 1) whole.checked = true;
            }
            saveData();
        }
    }
}

//删除任务功能
function delThing() {
    let eleObj = updateEle();
    for (let i = 0; i < eleObj.delLists.length; i++) {
        eleObj.delLists[i].onclick = () => {
            eleObj.items[i].className = 'li_scale';
            setTimeout(() => {
                thingsLists.removeChild(eleObj.items[i]);
                selectThing();
                saveData();
                totalNum();
            }, 1010);
        }
    }
}

//删除所有已完成任务功能
function delAllFinishThing() {
    delDone.onclick = () => {
        let eleObj = updateEle();
        for (let i = 0; i < eleObj.items.length; i++) {
            if (eleObj.checkbox[i].checked) {
                eleObj.items[i].className = 'li_scale';
            } else {
                continue;
            }
        }
        setTimeout(() => {
            for (let n = 0; n < eleObj.items.length; n++) {
                if (eleObj.items[n].className) {
                    thingsLists.removeChild(eleObj.items[n]);
                    saveData();
                    totalNum();
                } else {
                    continue;
                }
            }
        }, 1002);
    }
}

delAllFinishThing();

//添加任务功能
function addThing() {
    window.addEventListener('keyup', e => {
        if (e.key === 'Enter') {
            if (!inputThing.value) return;
            let thingsArr = [
                {
                    id: Date.now(),
                    thing: inputThing.value,
                    done: false
                }
            ];
            inputThing.value = '';
            let li = document.createElement('li');
            let label = document.createElement('label');
            let p = document.createElement('p');
            let button = document.createElement('button');
            let input = document.createElement('input');
            let span = document.createElement('span');
            label.setAttribute('class', 'check');
            label.setAttribute('for', thingsArr[0].id);
            input.setAttribute('class', 'checkbox');
            input.setAttribute('id', thingsArr[0].id);
            input.setAttribute('type', 'checkbox');
            p.setAttribute('class', 'content');
            button.setAttribute('class', 'del_lists');
            span.innerText = '●';
            button.innerText = '✘';
            p.innerText = thingsArr[0].thing;
            input.checked = thingsArr[0].done;
            label.appendChild(input);
            label.appendChild(span);
            li.appendChild(label);
            li.appendChild(p);
            li.appendChild(button);
            thingsLists.insertBefore(li, thingsLists.firstElementChild);
            delThing();
            selectThing();
            saveData();
            totalNum();
        }
    })
}

addThing();

//全选功能
function wholeThings() {
    let eleObj = updateEle();
    for (let n = 0; n < eleObj.items.length; n++) {
        if (!eleObj.checkbox[n].checked) break;
        if (n === eleObj.items.length - 1) whole.checked = true;
    }
    whole.addEventListener('change', () => {
        let eleObj = updateEle();
        if (whole.checked) {
            for (let i = 0; i < eleObj.items.length; i++) {
                eleObj.checkbox[i].checked = true;
            }
            saveData();
            return;
        }
        for (let i = 0; i < eleObj.items.length; i++) {
            eleObj.checkbox[i].checked = false;
        }
        saveData();
    })
}

wholeThings();

//读取本地任务数据
function readThings() {
    let arr = [];
    let dataArr = JSON.parse(window.localStorage.getItem('things'));
    if (!dataArr) {
        window.localStorage.setItem('things', JSON.stringify(arr));
    } else {
        for (let i = 0; i < dataArr.length; i++) {
            if (dataArr[i].id) {
                thingsLists.innerHTML += `
                <li>
                    <label class="check" for="${dataArr[i].id}">
                        <input id="${dataArr[i].id}" class="checkbox" type="checkbox">
                        <span>●</span>
                    </label>
                    <p class="content">${dataArr[i].thing}</p>
                    <button class="del_lists">✘</button>
                </li>`;
            }
        }
        let eleObj = updateEle();
        for (let n = 0; n < dataArr.length; n++) {
            eleObj.checkbox[n].checked = dataArr[n].done;
        }
        delThing();
        selectThing();
        wholeThings();
    }
}

readThings();
totalNum();
finish();